<template>
    <div class="bag-box">
        <van-nav-bar
            title="购物袋"
            right-text="编辑"
            left-arrow
            @click-left="router.back()"
        />
        <main>
            <div class="content" v-for="it in cartArr" :key="it.id">
                <van-checkbox v-model="it.checked"/>
                <van-card
                    @click="detEvt(it.pid)"
                    :num="it.pcount"
                    :price= "it.price + '.00'"
                    :desc="it.title"
                    :title="it.type"
                    :thumb="it.img"
                    :origin-price="it.oldPrice"
                />
            </div>
        </main>
        <van-submit-bar :price="amount * 100" button-text="提交订单">
            <van-checkbox v-model="checkAll" @change="handleSelectAll" :indeterminate="isIndeterminate" >全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup lang="ts">
import { computed, ComputedRef, ref } from 'vue';
import router from '../../router';
import { decodeApi } from '../../utils';
import { PINIA_CACHE_KEY } from '../../config/common.cfg';
import { cartListApi } from '../../apis/goodsApi';
import detEvt from '../details/detEvt';

/** 购物车列表 */
const cartArr:any = ref([])
const id = JSON.parse(decodeApi(sessionStorage.getItem(PINIA_CACHE_KEY))).token
cartList(id)
async function cartList(uid: string) {
    let res = await cartListApi(uid)
    cartArr.value = res.map ( (it: any) => {
        it.checked = false
        it.oldPrice = 900 - Math.floor(Math.random() * 51) + 50
        return it
    })
    cartArr.value.splice(5,2)
    cartArr.value.splice(2,1)
} 

// 购物车全选 */
// 计算属性：判断是否全部商品都被选中
const checkAll = computed(() => {
    return cartArr.value.length > 0 && cartArr.value.every((it: {
        checked: boolean;
    }) => it.checked);
});

// 计算属性：判断是否为部分选中状态（用于indeterminate状态）
const isIndeterminate = computed(() => {
    const selectedCount = cartArr.value.filter((it: {
        checked: boolean;
    }) => it.checked).length;
    return selectedCount > 0 && selectedCount < cartArr.value.length;
});

// 处理全选/取消全选
const handleSelectAll = (event: { target: { checked: boolean; }; }) => {
    cartArr.value.forEach((it: {
        checked: any;
    }) => {
        it.checked = event;
    });
};

/** 计算价格 */
const amount: ComputedRef<number> = computed(() => {
    return cartArr.value.reduce((r: number, it: any) => {
        if (it.checked) r += it.price * it.pcount;
        return r
    }, 0)
})


</script>

<style lang="less" scoped>
@import '../../style/common.less';

.bag-box {
    width: 100vw;
    height: 100%;
    background-color: @b5;

    .van-nav-bar {
        padding-top: 10px;
    }

    main {
        width: 100%;
        height: calc(100% - 102px);
        overflow-x: hidden;

        .content {
            position: relative;

            .van-checkbox {
                position: absolute;
                top: 40px;
                left: 26px;
                z-index: 999;
                
            }

            .van-card {
                padding-left: 50px;
                background-color: @g1;
                margin: 10px;
            }
        }
    }
    .van-submit-bar {
        bottom: 48px;
        z-index: 999;
    }
}
::v-deep .van-nav-bar .van-icon {
    color: @g5;
    font-size: 20px;
}
::v-deep .van-nav-bar__text {
    font-size: 14px;
    font-weight: bolder;
    color: @g5;
}
</style>
